import React, { Component } from 'react';
import './Header.css';
export default class Header extends Component {
  /* 我想要#todo-header里面的input能支持添加数据;
  这个组件是父组件使用的,所以,input获取到的数据应该用一种方式传输到根组件里面,渲染出来 */
  keyDown_input = (e) => {
    /* 做一个初步校验,短路掉非回车键,然后执行处理数据的函数,把数据传输到根组件里
    关键点是:子组件只需要调用父组件定义的函数,并且把本组件获取到的数据
    子组件调用函数的方式也是通过实例的props里面获得父组件传输过来的方法 */
    if (e.key !== 'Enter') return;
    if (e.target.value.trim() === '') return;
    this.props.getTodoName(e.target.value);
    e.target.value = '';
  };
  render() {
    return (
      <div className="todo-header">
        {/* 让input标签,监听键盘输入,调回调函数,判断keycode和 处理输入的数据 */}
        <input type="text" onKeyDown={this.keyDown_input} />
      </div>
    );
  }
}
